<template>
	<s-layout title="品牌" tabbar="/pages/brand/index" navbar="custom" :bgStyle="{ color: '#000' }">
		<view class="nav-wrap">
			<view class="nav-wrap-l">
				<view class="nav-wrap-l-item" @tap="tabChange(1)" :class="{'active': active == 1}">品牌孵化</view>
				<view class="nav-wrap-l-item" @tap="tabChange(2)" :class="{'active': active == 2}">市场</view>
				<view class="nav-wrap-l-item" @tap="tabChange(3)" :class="{'active': active == 3}">品牌</view>
			</view>
			<view class="nav-wrap-r">
				<image src="@/static/img/public-icon-2.png" mode=""></image>
			</view>
		</view>
		<view class="list-wrap">
			<view v-if="active == 1" class="list-content-1">
				<view class="list-content-1-s">
					<view>发行方</view>
					<image src="@/static/img/public-icon-4.png" mode=""></image>
				</view>
				<view class="list-content-1-l">
					<pro-one/>
				</view>
			</view>
			<view v-if="active == 2" class="list-content-2">
				<view class="list-content-2-t">
					<view class="list-content-2-t-item">全部</view>
					<view class="list-content-2-t-item">生态区</view>
					<view class="list-content-2-t-item">功能区</view>
					<view class="list-content-2-t-item">事件营销</view>
					<view class="list-content-2-t-item">品牌营销</view>
					<view class="list-content-2-t-item">功能区</view>
					<view class="list-content-2-t-item">事件营销</view>
					<view class="list-content-2-t-item">品牌营销</view>
				</view>
				<view class="list-content-2-s">
					<view @tap="state.showChooseAuthor = true" class="list-content-2-s-l">
						<view>发行方</view>
						<image src="@/static/img/public-icon-4.png" mode=""></image>
					</view>
					<view class="list-content-2-s-r">
						<image src="@/static/img/public-icon-5.png" mode=""></image>
						<view>我关注的</view>
					</view>
				</view>
				<view class="list-content-2-l">
					<pro-two/>
				</view>
			</view>
			<view v-if="active == 3" class="list-content-3">
				<view @tap="state.showApplyBrand = true" class="list-content-3-s">
					<view>申请入驻 +</view>
				</view>
				<view class="list-content-3-l">
					<pro-third/>
				</view>
			</view>
			<s-choose-author
			  :show="state.showChooseAuthor"
			  @close="state.showChooseAuthor = false"
			/>
			<s-apply-brand
			  :show="state.showApplyBrand"
			  @close="state.showApplyBrand = false"
			/>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue';
	import {
		onShow,
		onPageScroll,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import proOne from '../components/pro-one.vue';
	import proTwo from '../components/pro-two.vue';
	import proThird from '../components/pro-third.vue';

	// 隐藏原生tabBar
	uni.hideTabBar();

	const template = computed(() => sheep.$store('app').template?.home);
	const isLogin = computed(() => sheep.$store('user').isLogin);
	const active = ref(2)
	const state = reactive({
	  goodsId: 0,
	  skeletonLoading: true,
	  showChooseAuthor: false,
	  showApplyBrand: false,
	});

	function tabChange(val) {
	  active.value = val
	}

	onShow(() => {
		sheep.$store('user').updateUserData();
	});

	onPullDownRefresh(() => {
		sheep.$store('user').updateUserData();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 800);
	});

	onPageScroll(() => {});
</script>

<style lang="scss" scope>
	.nav-wrap{
		margin: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		font-weight: 500;
		font-size: 32rpx;
		color: #767676;
		.nav-wrap-l{
			display: flex;
			align-items: center;
			.nav-wrap-l-item{
				margin-right: 40rpx;
			}
			.active{
				font-size: 36rpx;
				color: #FFFFFF;
			}
		}
		.nav-wrap-r{
			width: 30rpx;
			height: 30rpx;
			image{
				width: inherit;
				height: inherit;
			}
		}
	}
	.list-wrap{
		margin: 30rpx;
		.list-content-1{
			.list-content-1-s{
				display: flex;
				align-items: center;

				margin: 50rpx 0;
				font-weight: 400;
				font-size: 28rpx;
				color: #EBEBEB;
				image{
					width: 11rpx;
					height: 9rpx;
					margin-left: 12rpx;
				}
			}
		}
		.list-content-2{
			.list-content-2-t{
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				.list-content-2-t-item{
					width: 122rpx;
					height: 54rpx;
					line-height: 54rpx;
					text-align: center;
					background: #1E1E1E;
					border-radius: 27rpx;

					font-weight: 400;
					font-size: 24rpx;
					color: #767676;
					margin-top: 20rpx;
					&:not(:nth-child(5n+1)){
						margin-left: 20rpx;
					}
				}
			}
			.list-content-2-s{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 50rpx 0;
				.list-content-2-s-l{
					display: flex;
					align-items: center;

					font-weight: 400;
					font-size: 28rpx;
					color: #EBEBEB;
					image{
						width: 11rpx;
						height: 9rpx;
						margin-left: 12rpx;
					}
				}
				.list-content-2-s-r{
					width: 170rpx;
					height: 58rpx;
					background: #1E1E1E;
					border-radius: 29rpx;

					font-weight: 400;
					font-size: 26rpx;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 24rpx;
						height: 20rpx;
						margin-right: 12rpx;
					}
				}
			}
			.list-content-2-l{
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
			}
		}
		.list-content-3{
			.list-content-3-s{
				display: flex;
				align-items: center;

				margin: 50rpx 0;
				font-weight: 400;
				font-size: 28rpx;
				color: #13C093;
			}
		}
	}
</style>
